<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>商品页面</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link type="text/css" href="../css/optstyle.css" rel="stylesheet" />
		<link type="text/css" href="../css/style.css" rel="stylesheet" />
		
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script src="../js/axios.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="../js/global.js"></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js"></script>
		<script src="../js/layer/layer.js"></script>
		<script src="../js/param.js"></script>
		
		<!--<script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>-->
		<script type="text/javascript" src="../basic/js/quick_links.js"></script>

		<script type="text/javascript" src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script type="text/javascript" src="../js/jquery.imagezoom.min.js"></script>
		<script type="text/javascript" src="../js/jquery.flexslider.js"></script>
		<script type="text/javascript" src="../js/list.js"></script>

	</head>

	<body>


		<!--顶部导航条 -->
		
			<div class="listMain container">

				<!--分类-->
			<div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="../person/text.html">推荐</a></li>
							<li class="qc"><a href="search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="../person/about.html">我们</a></li>
						</ul>
						</div>
			</div>
				<ol class="am-breadcrumb am-breadcrumb-slash">
					<li><a href="#">首页</a></li>
					<li><a href="#">分类</a></li>
					<li class="am-active">内容</li>
				</ol>
				
				<div class="scoll">
					<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<img src="../goods/getgoods?gid=<%=request.getParameter("gid") %>" title="pic"   width="60px" height="60px" />
								</li>
								
							</ul>
						</div>
					</section>
				</div>

				<!--放大镜-->

				<div class="item-inform">
					<div class="clearfixLeft" id="clearcontent">

						<div class="box">
							
							<div class="tb-booth tb-pic tb-s310">
								<a href="javascript:;"><img src="../goods/getgoods?gid=<%=request.getParameter("gid") %>" alt="细节展示放大镜特效" rel="../goods/getgoods?gid=<%=request.getParameter("gid") %>" class="jqzoom" /></a>
							</div>
							<ul class="tb-thumb" id="thumblist">
								<li class="tb-selected">
									<div class="tb-pic tb-s40">
										<a href="javascript:;"><img src="../goods/getgoods?gid=<%=request.getParameter("gid") %>" mid="../goods/getgoods?gid=<%=request.getParameter("gid") %>" big="../goods/getgoods?gid=<%=request.getParameter("gid") %>" width="60px" height="60px" ></a>
									</div>
								</li>
								
							</ul>
						</div>

						<div class="clear"></div>
					</div>

					<div class="clearfixRight">

						<!--规格属性-->
						<!--名称-->
						<div class="tb-detail-hd">
							<h1>	
							 {{goods.gname}}&nbsp;{{goods.gdesc}}
	      				    </h1>
						</div>
						<div class="tb-detail-list">
							<!--价格-->
							<div class="tb-detail-price">
								<li class="price iteminfo_price">
									<dt>促销价</dt>
									<dd><em>¥</em><b class="sys_item_price">{{goods.gprice}}</b>  </dd>                                 
								</li>
								<li class="price iteminfo_mktprice">
									<dt>原价</dt>
									<dd><em>¥</em><b class="sys_item_mktprice">{{goods.gprice*1.5}}</b></dd>									
								</li>
								<div class="clear"></div>
							</div>

							<!--地址-->
							<dl class="iteminfo_parameter freight">
								<dt>配送至</dt>
								<div class="iteminfo_freprice">
									
									<div class="pay-logis">
										默认地址&nbsp;&nbsp;&nbsp;&nbsp;快递<b class="sys_item_freprice">10</b>元
									</div>
								</div>
							</dl>
						
							<div class="clear"></div>

							<!--各种规格-->
							<dl class="iteminfo_parameter sys_item_specpara">
								
								<dd>
									<!--操作页面-->

									<div class="theme-popover-mask"></div>

									<div class="theme-popover">
										<div class="theme-span"></div>
										<div class="theme-poptit">
											<a href="javascript:;" title="关闭" class="close">×</a>
										</div>
										<div class="theme-popbod dform">
											<form class="theme-signin" name="loginform" action="" method="post">

												<div class="theme-signin-left">

													<div class="theme-options">
														<div class="cart-title">描述</div>
														<ul>
															<li class="sku-line selected">{{goods.gdesc}}<i></i></li>
															
														</ul>
													</div>
													<div class="theme-options">
														<div class="cart-title">产地</div>
														<ul>
															<li class="sku-line selected">{{goods.gplace}}<i></i></li>
															
														</ul>
													</div>
													
													<div class="theme-options">
														<div class="cart-title number">数量</div>
														<dd>
															<input id="min" class="am-btn am-btn-default" name="" type="button" value="-" @click="updateQty(-1)"/>
															<input id="text_box" name="" type="text" v-model="cart.qty" style="width:30px;" />
															<input id="add" class="am-btn am-btn-default" name="" type="button" value="+" @click="updateQty(1)"/>
															<span id="Stock" class="tb-hidden">库存<span class="stock">{{goods.gcount}}</span>件</span>
														</dd>

													</div>
													<div class="clear"></div>

													
												</div>
												

											</form>
										</div>
									</div>

								</dd>
							</dl>
							<div class="clear"></div>
							<!--活动	-->
							
						</div>

						<div class="pay">
							
							<li>
								<div class="clearfix tb-btn tb-btn-buy theme-login">
									<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="javascript:;" @click="addpay()">立即购买</a>
								</div>
							</li>
							<li>
								<div class="clearfix tb-btn tb-btn-basket theme-login">
									<a id="LikBasket" title="加入购物车" href="javascript:;" @click="addCart()"><i></i>加入购物车</a>
								</div>
							</li>
						</div>

					</div>

					<div class="clear"></div>
					<div class="footer">
						<div class="footer-hd">
							<p>
								
								<b>|</b>
								<a href="#">商城首页</a>
								<b>|</b>
								<a href="#">支付宝</a>
								<b>|</b>
								<a href="#">物流</a>
							</p>
						</div>
						<div class="footer-bd">
							<p>
								
								<a href="#">合作伙伴</a>
								<a href="#">联系我们</a>
								<a href="#">网站地图</a>
								<em>© 2015-2025 xxxxxx <a href="http://www.cssmoban.com/" target="_blank" title="模板之家"></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank"></a></em>
							</p>
						</div>
					</div>
				</div>

				
				
							
				<!-- introduce-->

				<div class="introduce">
					
					<div class="introduceMain">
						<div class="am-tabs" data-am-tabs>
							<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
								
							</ul>
						</div>

						<div class="clear"></div>

					</div>

				</div>
			</div>
			
			<script>
			//获得传递过来的商品编号
			var gid = getParam('gid');
			var uid =localStorage.getItem('id');
			var aid = localStorage.getItem('aid');
			//vue
			var vue = new Vue({
				el:'.container',
				data:{
					goods:{
						gid:'',
						gdesc:'',
						gprice:'',
						gcount:'',
						gplace:'',
						gname:''
					},
					
					cart:{
						uid:localStorage.getItem('id'),
						gid:'',
						qty:1
					}
				},
				methods:{
					
					//表单回显
					get:function(){
						
						axios.get(baseUrl + '/goods/get',{
							params:{
								gid:gid
							}
						})
							.then(function(response) {
								this.goods.gid = response.data.gid;
								this.goods.gname = response.data.gname;
								this.goods.gdesc = response.data.gdesc;
								this.goods.gprice = response.data.gprice;
								this.goods.gcount = response.data.gcount;
								this.goods.gplace = response.data.gplace;
								this.cart.gid = response.data.gid;
							}.bind(this))
							.catch(function(error) {
								layer.msg('请求失败');
							});
						
					},
					returnIndex:function(){
						location.href="index.html";
					},
					
					//修改数量
					updateQty:function(val) {		
						
						this.cart.qty +=val;//加1或减1						
					},
					addpay:function(){
						//加入订单并跳转到支付页面
					 	axios.post(baseUrl + '/order/add', $.param({
							uid:uid,
							ostate:"待付款",
							date:new Date(),
							gid:gid,
							qty:this.cart.qty,
							aid:aid
						}))
						.then(function(response) {
						}.bind(this))
						.catch(function(error) {
							layer.msg('交易出错');
						}); 
						//获取刚加入订单的orid
						axios.get(baseUrl + '/order/getId',{
							params:{
							}
						})
							.then(function(response) {
								setTimeout(function(){
									location.href="pay.html?orid=DD"+response.data;
								},1500);
							}.bind(this))
							.catch(function(error) {
								layer.msg('请求失败');
							});
					 
						
					},
					//添加到购物车
					addCart:function(){
						axios.post(baseUrl + '/cart/add', $.param(this.cart))
						.then(function(response) {
							layer.msg('添加购物车成功');
							setTimeout(function(){
								
								location.href="shopcart.html"
								
							},1500);
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('添加购物车失败');
						});
					}
					
					
				},
				mounted:function(){
					this.get();
					
				}
				
			});
			
			
			
		</script>
		<script type="text/javascript">
			$(function() {});
			$(window).load(function() {
				$('.flexslider').flexslider({
					animation: "slide",
					start: function(slider) {
						$('body').removeClass('loading');
					}
				});
			});
		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".jqzoom").imagezoom();
				$("#thumblist li a").click(function() {
					$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
					$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
					$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
				});
			});
		</script>
	</body>

</html>